<template>
    <div class="layout-padding">
        <div class="layout-padding-auto layout-padding-view">
            <el-row class="myContent">
                <el-col :span="22">
                    <h1 class="my-heading">试卷商城选购</h1>
                </el-col>
                <el-col :span="2">
                    <el-button style="margin-top: 5px;" icon="ShoppingCartFull" type="warning"  @click="formDialogRef.openDialog2()">购物车</el-button>
                </el-col>
            </el-row>
            <el-row class="myContent" v-show="showSearch">
                <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
                    <el-form-item label="试卷名称" prop="dataName" >
                        <el-input placeholder="请输入试卷名称" v-model="state.queryForm.dataName" />
                    </el-form-item>
                    <el-form-item label="关键点" prop="keyPoint" >
                        <el-input placeholder="请输入关键点" v-model="state.queryForm.keyPoint" />
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="search" type="primary" @click="getDataList">查询</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                        <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef1.openDialog1('1')" v-auth="'train_spkZlData_add'">新 增</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <div style="overflow-y:scroll; height:100%; display: flex; flex-wrap: wrap; padding: 10px 20px;">
                <div class="box" v-for="product in state.dataList" :key="product.id">
                    <el-card>
                        <img v-if="product.onlyOfficeId==null" src="../../../assets/pic.png">
                        <img v-if="product.onlyOfficeId" :src="officeUrl+product.onlyOfficeId">
                        <div slot="header" class="clearfix">
                            <el-tooltip class="box-item" effect="light" :content="product.dataName" placement="bottom-end">
                                <el-text truncated>{{product.dataName}}</el-text>
                            </el-tooltip>
                            <div>
                                <el-row>
                                    <el-tooltip class="box-item" effect="light" :content="product.goodsDescribe" placement="bottom-end">
                                        <el-text truncated>简介: {{product.goodsDescribe}}</el-text>
                                    </el-tooltip>
                                </el-row>
                                <el-row>
                                    <el-tooltip class="box-item" effect="light" :content="product.keyPoint" placement="bottom-end">
                                        <el-text truncated>关键点: {{product.keyPoint}}</el-text>
                                    </el-tooltip>
                                </el-row>
                                <el-row>
                                    <el-col :span="9" style="margin-left: -5px">
                                        <el-button :icon="product.state ? 'ShoppingCartFull': 'ShoppingCart'" :disabled="product.state" key="warning" type="warning" text @click="getProduct(product)">加入购物车</el-button>
                                    </el-col>
                                    <el-col :span="10" class="text-right" style="margin-top: 5px">
                                        <el-button type="warning" size="small" @click="centerDialogVisible = true">购买</el-button>
                                    </el-col>
                                </el-row>
                                <el-row>
<!--                                    <el-col :span="10"></el-col>-->
                                    <el-col :span="8">
                                        <el-button icon="edit-pen" text type="primary" v-auth="'train_spkZlData_edit'" @click="formDialogRef1.openDialog1('1',product.id)">编辑</el-button>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-button icon="delete" text type="primary" v-auth="'train_spkZlData_del'" @click="handleDelete([product.id])">删除</el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div>
            <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
        </div>

        <!--     购物车  -->
        <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
        <!--     编辑、新增  -->
        <form-dialog1 ref="formDialogRef1" @refresh="getDataList(false)" />
        <!--  购买弹框    -->
        <el-dialog v-model="centerDialogVisible" title="购买" width="350" align-center>
            <div style="width:70%;margin: auto auto">
                <el-row class="span1">
                    <span >购买商品需线下联系</span>
                </el-row>
                <el-row class="span2">
                    <span>销售:{{buyInfoList.name}}</span>
                </el-row>
                <el-row class="span2">
                    <span>联系方式:{{buyInfoList.phone}}</span>
                </el-row>
                <el-row class="span2">
                    <span>邮箱:{{buyInfoList.mail}}</span>
                </el-row>
                <el-row class="span2">
                    <img :src="officeUrl+buyInfoList.onlyOfficeId" style="height: 180px;width: 180px">
                </el-row>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="centerDialogVisible = false">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="systemSpkSTData">
    import { BasicTableProps, useTable } from "/@/hooks/table";
    import {fetchList, delObjs, addShoppingCart, getDataTypeList, buyInfo} from "/@/api/train/spkZlData";
    import { useMessage, useMessageBox } from "/@/hooks/message";
    import { useDict } from '/@/hooks/dict';
    import {ref} from "vue";
    import {office} from "/@/api/train/kszlFile";
    import {ElMessage} from "element-plus";

    // 引入组件
    const FormDialog = defineAsyncComponent(() => import('./form1.vue'));
    const FormDialog1 = defineAsyncComponent(() => import('./addForm.vue'));
    // 定义查询字典

    // 定义变量内容
    const officeUrl = ref()
    const typeList = reactive([])
    const formDialogRef = ref()
    const formDialogRef1 = ref()
    const buyInfoList = ref({})
    // 搜索变量
    const queryRef = ref()
    const showSearch = ref(true)
    const centerDialogVisible = ref(false)
    // 多选变量
    const selectObjs = ref([]) as any
    const multiple = ref(true)

    const state: BasicTableProps = reactive<BasicTableProps>({
        queryForm: {
            goodsType:'1'
        },
        pageList: fetchList
    })
    //  table hook
    const {
        getDataList,
        currentChangeHandle,
        sizeChangeHandle,
        sortChangeHandle,
        downBlobFile,
        tableStyle
    } = useTable(state)
    onMounted(()=>{
        office().then((res) => {
            officeUrl.value = res.data + '/downloadFile/';
        });
        getDataTypeList().then(res=>{
            Object.assign(typeList,res.data)
        })
        buyInfo().then(res=>{
            buyInfoList.value = res.data.records[1]
        })
    })
    // 清空搜索条件
    const resetQuery = () => {
        // 清空搜索条件
        queryRef.value?.resetFields()
        // 清空多选
        selectObjs.value = []
        getDataList()
    }
    //加入购物车
    const getProduct=(product:any)=>{
        let dataId = {dataId:product.dataId}
        product.state = true
        addShoppingCart(dataId).then(res=>{
            ElMessage({
                message: '成功加入购物车',
                type: 'success',
            })
        }).catch(error=>{
            if(error.code==1){
                ElMessage({
                    message: '已重复添加购物车',
                    type: 'warning',
                })
            }
        })
    }
    // 导出excel
    const exportExcel = () => {
        downBlobFile('/train/spkZlData/export', Object.assign(state.queryForm, { ids: selectObjs }), 'spkZlData.xlsx')
    }
    // 多选事件
    const selectionChangHandle = (objs: { id: string }[]) => {
        selectObjs.value = objs.map(({ id }) => id);
        multiple.value = !objs.length;
    };
    // 删除操作
    const handleDelete = async (ids: string[]) => {
        try {
            await useMessageBox().confirm('此操作将永久删除');
        } catch {
            return;
        }
        try {
            await delObjs(ids);
            getDataList();
            useMessage().success('删除成功');
        } catch (err: any) {
            useMessage().error(err.msg);
        }
    };
</script>
<style lang="scss" scoped>
    .myContent{
        margin: 10px 20px;
    }
    .my-heading {
        color: black;
        font-weight: bold;
        font-size: 26px;
        margin-bottom: 10px;
    }
    .box{
        margin: 0px 20px 20px 0;
        width: 18%;
    }
    .span1{
        font-weight: bold;
        font-size: 16px;
        color: red;
        margin-bottom: 10px;
    }
    .span2{
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 10px;
    }
    .el-card{
        height: 350px;
        position: relative;
    }
    .clearfix{
        height: 130px;
        width: 237px;
        position: absolute;
        bottom:10px
    }
    img{
        height: 180px;
        margin: 0 auto;
    }
</style>